<template>
  <div class="tree">
    <el-card>
      <div class="content">
        <el-row>
          <el-col :span="8" class="tree-line">
            <el-tree
              :data="treeList"
              :props="defaultProps"
              @node-click="handleNodeClick"
            ></el-tree>
          </el-col>
          <el-col :span="16">
            <el-table :data="result" style="width: 100%" border v-if="type == '学生'">
              <el-table-column prop="major" label="专业" width="180">
              </el-table-column>
              <el-table-column prop="name" label="姓名" width="180">
              </el-table-column>
              <el-table-column prop="stuId" label="学号"> </el-table-column>
              <el-table-column prop="stuclass" label="班级"> </el-table-column>
              <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button type="primary" size="mini">编辑</el-button>
                </template>
              </el-table-column>
              
            </el-table>
            <el-table :data="result" style="width: 100%" border v-else>
              <el-table-column prop="name" label="姓名" width="180">
              </el-table-column>
              <el-table-column prop="teacherId" label="教师号"> </el-table-column>
              <el-table-column prop="phone" label="手机号"> </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { reqTree, reqStudentDetail, reqTeacherDetail } from "../../api/user";
export default {
  data() {
    return {
      treeList: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      result: [],
      type: ''
    };
  },
  mounted() {
    this.getTreeList();
  },
  methods: {
    async getTreeList() {
      const res = await reqTree();
      this.treeList = res.data;
    },
    async handleNodeClick(data) {
      if (data.children || data.label == '管理员') return
      if (data.label == '教师') {
        const res = await reqTeacherDetail()
        this.result = res.data.data.items
        this.type = '教师'
      } else {
        const { pname: major, label: stuclass } = data;
        const res = await reqStudentDetail({ stuclass, major });
        this.result = res.data.data.items
        this.type = '学生'
      }
    },
  },
};
</script>

<style>
.tree {
  margin: 0 10px;
}
.content {
  padding: 15px;
}
.tree-line {
  border-right: 2px solid pink;
}
</style>